<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>酒店管理系统</title>
    <link rel="stylesheet" href="../bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="../iconfont/amend、delete、add、search/iconfont.css">
    <link rel="" href="../bootstrap-3.4.1/fonts/glyphicons-halflings-regular.eot">
    <script src="../jQuery/jquery-3.6.0.min.js"></script>
    <script src="../bootstrap-3.4.1/js/bootstrap.min.js"></script>
    <script src="../JavaScript/dataSaveAndGet.js"></script>
    <link rel="stylesheet" href="../iconfont/amend、delete、add、search/iconfont.css">
    <!-- <link rel="stylesheet" href="../css/rc/guestRoom.css"> -->
    <!-- <script src="../JavaScript/rc/initializationData.js"></script> -->
    <link rel="stylesheet" href="../css/rc/finane.css">
</head>

<body>
    <header class="clear">
        <p>XX酒店后台管理系统</p>
        <div class="portrait clear">
            <!-- 头像 -->
            <div>
                <img src="../images/老板.webp" alt="">
            </div>
            <div id="quit">
                <p>工号:<span class="jobId"></span> &nbsp;欢迎你!
                </p>
                <button>退出<span class="iconfont icon-tuichu"></span></button>
            </div>
        </div>
    </header>
    <!-- 主导航 -->
    <nav class="navbar navbar-default" id="mianNav">
        <div class="container-fluid">
            <!-- 主导航选项 -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class=""><a href="./guestRoom.html">客房管理</a></li>
                    <li class=""><a href="./reserve.html">预定管理</a></li>
                    <li class=""><a href="./crm.html">房客管理</a></li>
                    <li class=""><a href="./orderForm.html">订单管理</a></li>
                    <li class="mianActive"><a href="./finance.html">财务管理</a></li>
                    <li class=""><a href="./staffManagement.html">员工管理</a></li>
                    <li class=""><a href="./personinMess.html">个人信息</a></li>
                    <li class=""><a href="./gonggao.html">公告</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <main class="clear">
        <nav class="navbar navbar-default">
            <div class="container-fluid">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar">1</span>
                        <span class="icon-bar">2</span>
                        <span class="icon-bar">3</span>
                    </button>
                    <a class="navbar-brand" href="#">财务管理</a>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class=""><a href="./finance.html">查看入账信息</a></li>
                        <li class="active" id="lopo"><a href="./expenditure.html">查看支出信息</a></li>
                    </ul>
                    <form class="navbar-form navbar-left">
                        搜索类型：
                        <select name="" id="typeOption" class="form-control">
                            <option value="option1">姓名</option>
                            <option value="option2">房号</option>
                            <option value="option3">订单日期</option>
                        </select>
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="请输入要搜索的房客信息">
                        </div>
                        <button class="btn btn-default" id="shousuo">搜索财务信息</button>
                    </form>
                </div><!-- /.navbar-collapse -->
            </div><!-- /.container-fluid -->
        </nav>
        <div class="table-responsive">
            <table class="table" >
                <h4>订单列表</h4>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>房号</th>
                        <th>房费</th>
                        <th>押金</th>
                        <th>退房时间</th>
                        <th>操作时间</th>
                        <th>退押金</th>
                        <th>操作人</th>
                        <th> 操作</th>
                    </tr>
                </thead>
                <tbody id="mytbody">

                </tbody>
            </table>
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                    aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="myModalLabel">提示</h4>
                        </div>
                        <div class="modal-body">
                            <label>客户姓名:<input type="text" id="checkInOrder-name" disabled></label>
                            <br>
                            <label>房间号&nbsp:<input type="text" id="checkInOrder-room" disabled></label>
                            <br>
                            <label>房费 &nbsp:<input type="text" id="checkInOrder-price" disabled></label>
                            <br>
                            <label>押金 &nbsp:<input type="text" id="checkInOrder-cach" disabled></label>
                            <br>
                            <label>入住时间:<input type="text" id="checkInOrder-time" disabled></label>
                            <br>
                            <label>订单号 &nbsp:<input type="text" id="checkInOrder-order" disabled></label>
                            <br>
                            <label>订单状态:<input type="text" id="checkInOrder-orderState" disabled></label>
                            <br>
                            <label>操作人 &nbsp:<input type="text" id="checkInOrder-inputter" disabled></label>
                            <br>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal" id="buttonj">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <nav aria-label="Page navigation" id="navhead1">
                <ul class="pagination">
                    <li id="fronts">
                        <a href="#" aria-label="Previous">
                            <span aria-hidden="true">&laquo;</span>
                        </a>
                    </li>
                    <li class="hears" id="back">
                        <a href="#" aria-label="Next">
                            <span aria-hidden="true">&raquo;</span>
                        </a>
                    </li>
                </ul>
            </nav>
            <table class="table">
                <h4>订单列表</h4>
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>房号</th>
                        <th>房费</th>
                        <th>押金</th>
                        <th>退房时间</th>
                        <th>操作时间</th>
                        <th>退押金</th>
                        <th>操作人</th>
                        <th> 操作</th>
                    </tr>
                </thead>
                <tbody id="mytbody2">

                </tbody>
            </table>
            <table class="table">
                <thead>
                    <th>
                        <h4>酒店收入表单</h4>
                    </th>
                    <tr>
                        <th>总收入</th>
                        <th>押金收入</th>
                        <th>实际房费收入</th>
                    </tr>
                </thead>
                <tbody id="mytbody1">

                </tbody>
            </table>
            <button id="count">总计</button>
            <script src="../JavaScript/rc/exoenditure.js"></script>

            <!-- <script>
                let checkInOrder1 = getData('checkInOrder')
                let maxmiddle = 0 //最大页
                let nowmiddle = 0  //当前
                // 渲染分页按钮
                let middlenums = Math.ceil(checkInOrder1.length / 10)
                maxmiddle = middlenums
                for (let i = 1; i <= middlenums; i++) {
                    $('.hears').before(`<li class='myli'><a href="#">${i}</a></li>`)
                }
                // 给每一个分页按钮绑定点击事件
                $('.pagination').on('click', '.myli', function () {
                    let clickNum = $(this).text()
                    nowmiddle = clickNum
                    console.log(nowmiddle);
                    let start = (parseInt(clickNum) - 1) * 10  //起始下标
                    let end = start + 9  //终止下标
                    if (clickNum == maxmiddle) {
                        end = checkInOrder1.length - 1  //数据最后一项的下标
                    }
                    showTbody(start, end)
                })
                let zhuan = []
                function koko() {
                    for (let b = 0; b < checkInOrder1.length; b++) {
                        let zhauntai = checkInOrder1[b].orderState
                        if (zhauntai === '已完成') {
                            zhuan.push(checkInOrder1[b])
                        }
                        // console.log(zhauntai);

                    }
                }
                koko()
                console.log(zhuan);
                //渲染页面数据
                let time = getTime()
                console.log(time);

                function showTbody() {
                    $('#mytbody').html('')
                    for (let h = 0; h < zhuan.length; h++) {
                        console.log(123);
                        // for (let i = 0; i < checkInOrder1.length; i++) {
                        //    if(zhuan===checkInOrder1[i].orderState){
                        // console.log(123);
                        let htmlStr1 = ` 
                <tr>
                    <td>${zhuan[h].clientName}</td>
                    <td>${zhuan[h].roomNumber}</td>
                    <td>${zhuan[h].price}</td>
                    <td>${zhuan[h].cashPledge}</td>
                    <td>${zhuan[h].checkInTime}</td>
                    <td>${time}</td>
                    <td>${zhuan[h].cashPledge}</td>
                    <td>${zhuan[h].inputter}</td>
                    <td class='jkie'>         
                        <button class="tankuang">详情</button>
                    </td>
                </tr>
                `
                        $('#mytbody').append(htmlStr1)
                        // }
                        // }
                    }
                }
                showTbody()
                //遍历数组中的房费
                let num = []
                let sum = 0  //累加求和
                function shuju() {
                    for (let j = 0; j < checkInOrder1.length; j++) {
                        let aggregate = parseInt(checkInOrder1[j].price)
                        let cash = parseInt(checkInOrder1[j].cashPledge)
                        num.push(aggregate)
                        num.push(cash)
                    }
                    return num
                }
                shuju()

                // 计算总房费+押金
                function zongheji() {
                    for (let k = 0; k < num.length; k++) {
                        sum = sum + num[k]
                    }
                    return sum
                }
                zongheji()
                console.log(sum);
                //
                let jing = []  //房费数组
                let shouru = 0  //累加求和
                function fanfeisr() {
                    for (let j = 0; j < zhuan.length; j++) {
                        let aggregate = parseInt(zhuan[j].cashPledge)
                        jing.push(aggregate)
                    }
                    return jing
                }
                fanfeisr()

                //押金


                function jingheji() {
                    for (let l = 0; l < jing.length; l++) {
                        shouru = shouru + jing[l]
                    }
                    return shouru
                }
                jingheji()

                let money3 = sum
                let money1 = sum - shouru
                let money2 = shouru

                //遍历数组中的押金
                //显示总收入
                $('.table-responsive').on('click', '#count', function () {
                    $('#mytbody1').html('')
                    let htmlStr = ` 
                    <tr>
                        <td>${money3}</td>
                        <td>${money2}</td>
                        <td>${money1}</td>
                    </tr>
                    `
                    $('#mytbody1').append(htmlStr)
                })

                //上一页
                $('#fronts').click(function () {
                    //根据当前页来判断
                    let num = parseInt(nowmiddle) - 1
                    let start = (parseInt(num) - 1) * 10  //起始下标
                    let end = start + 9   //终止下标

                    //判断当前点击的是不是第一页
                    if (nowmiddle == 1) {

                    } else {
                        showTbody(start, end)
                        nowmiddle = num   //修改完数据过后，当前页要更新
                    }
                })
                //下页面
                $('#back').click(function () {
                    //根据当前页来判断
                    let num = parseInt(nowmiddle) + 1   //num 是应该渲染的是哪一页
                    console.log(num);
                    let start = (parseInt(num) - 1) * 10  //起始下标
                    let end = start + 9   //终止下标
                    //判断当前点击的是不是最后一页，是最后一页的话 end值就要变
                    if (num == maxmiddle) {
                        end = checkInOrder1.length - 1  //数据最后一项的下标
                    }
                    console.log(start, end);

                    //判断当前点击的是不是最后一页
                    if (nowmiddle == maxmiddle) {

                    } else {
                        showTbody(start, end)
                        nowmiddle = num   //修改完数据过后，当前页要更新
                    }
                })
                //详情
                $('#mytbody').on('click', '.tankuang', function () {
                    $('#myModal').modal('show')
                    let nameVal = $(this).parents('tr').children('td').eq(0).text()
                    let roomVal = $(this).parents('tr').children('td').eq(1).text()
                    let priceVal = $(this).parents('tr').children('td').eq(2).text()
                    let cashVal = $(this).parents('tr').children('td').eq(3).text()
                    let timeVal = $(this).parents('tr').children('td').eq(4).text()

                    $('#checkInOrder-name').val(nameVal)
                    $('#checkInOrder-room').val(roomVal)
                    $('#checkInOrder-price').val(priceVal)
                    $('#checkInOrder-cach').val(cashVal)
                    $('#checkInOrder-time').val(timeVal)
                    for (let i = 0; i < checkInOrder1.length; i++) {
                        if (nameVal === checkInOrder1[i].clientName) {
                            let order = checkInOrder1[i].orderNumber
                            let state = checkInOrder1[i].orderState
                            let inputter = checkInOrder1[i].inputter
                            // console.log(order);
                            $('#checkInOrder-order').val(order)
                            $('#checkInOrder-orderState').val(state)
                            $('#checkInOrder-inputter').val(inputter)

                        }
                    }
                })
                // 显示当前登录者头像及工号
                showHeadImgId()

                // 头部退出按钮
                $('#quit').find('button').click(function () {
                    open('./login.html', '_self')
                })

                //显示当前登录者头像及工号
                function showHeadImgId() {
                    let useData = getData('staff')
                    let loginUser = getData('loginUser').jobNumber
                    for (let i = 0; i < useData.length; i++) {
                        if (useData[i].jobNumber == loginUser) {
                            $('.portrait').find('img').attr('src', useData[i].headPortrait)
                            $('#quit').find('.jobId').html(useData[i].jobNumber)
                        }

                    }
                }
                let AccessLevel = getData('loginUser').AccessLevel
                console.log(AccessLevel);
                if (AccessLevel > 1) {
                    insufficientPrivileges()
                }
                //权限不足提示
                function insufficientPrivileges() {
                    //展示权限不足框
                    $('#insufficientPrivileges').show().siblings().hide()
                    //清除原来的显示数据
                    $('#insufficientPrivileges').html('')
                    //展示权限不足
                    $('#insufficientPrivileges').eq(0).append(`
                 <p>权限不足请联系管理员</p>
             `)
                }

                //点击搜索按钮
                $('button').on('click', function () {
                    //清除表单中按钮的默认提交事件
                    event.preventDefault()
                })

                //点击主菜单
                $('#mianNav .navbar-nav>li').on('click', function () {
                    //设置自身为选中状态并清除其他选项的选中状态
                    $(this).addClass('mianActive').siblings().removeClass('mianActive')
                })

                //点击二级菜单
                $('main .navbar-nav>li').on('click', function () {
                    //设置自身为选中状态并清除其他选项的选中状态
                    $(this).addClass('active').siblings().removeClass('active')
                })



            </script> -->

</body>

</html>